<template>
	<!-- 我的/登录 -->
	<view class="login">

		<!-- 登录表单 -->
		<view class="card_div">
			<u--form labelPosition="left" :model="formData" :rules="rules" ref="registerForm" labelWidth="100">
				<u-form-item label="昵称" prop="displayName" borderBottom required>
					<u--input placeholder="请输入昵称" border="none" v-model="formData.displayName" clearable>
					</u--input>
				</u-form-item>

				<u-form-item label="手机号" prop="phone" borderBottom required>
					<u--input placeholder="请输入手机号" border="none" v-model="formData.phone" clearable>
					</u--input>
				</u-form-item>

				<u-form-item label="邮箱" prop="email" borderBottom>
					<u--input placeholder="请输入邮箱" border="none" v-model="formData.email" clearable>
					</u--input>
				</u-form-item>


				<u-form-item label="密码" prop="password" borderBottom required>
					<u-input type="password" placeholder="请输入密码" border="none" v-model="formData.password" clearable>
					</u-input>
				</u-form-item>

				<u-form-item label="确定密码" prop="repassword" borderBottom required>
					<u-input type="password" placeholder="确定密码" border="none" v-model="formData.repassword" clearable>
					</u-input>
				</u-form-item>

				<u-form-item label="验证码" prop="code" borderBottom required>
					<u-input placeholder="请输入验证码" border="none" v-model="formData.code" @blur="verifyCode" clearable>
						<template slot="suffix">
							<jp-verification-literalness ref="verCode" :contentWidth="90" :contentHeight="40">
							</jp-verification-literalness>
						</template>
					</u-input>
				</u-form-item>

			</u--form>

		</view>


		<!-- 注册按钮 -->
		<u-button :customStyle="btnStyle" :ripple="true" shape="circle" @click="submit()">注册</u-button>


		<view hover-class="none" @click="gotoLogin" class="login_label">已有账号，点此登录</view>



		<!-- 协议 -->
		<view class="user_agreement">
			<text class="">注册即代表您同意</text>
			<text class="agreement">《分享社区协议》</text>
		</view>

		<u-toast ref="uToast"></u-toast>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				formData: {
					// 昵称
					displayName: '',
					// 手机号
					phone: '',
					// 邮箱
					email: '',
					// 密码
					password: '',
					repassword: '',
					// 验证码
					code: ''
				},
				rules: {
					displayName: [
						// 必填规则
						{
							required: true,
							message: '请填写昵称',
							trigger: ['blur'],
						},
						{
							min: 1,
							max: 12,
							message: '长度在1-20个字符之间'
						}
					],

					phone: [{
							required: true,
							message: '',
							trigger: ['blur'],
						},
						{
							pattern: /^1[3-9]\d{9}$/,
							transform(value) {
								return String(value);
							},
							message: '请输入正确的手机号码格式'
						},
					],
					email: [{
							required: false,
							message: '',
							trigger: ['blur'],
						},
						{
							pattern: /^[\w-]+(\.[\w-]+)*@[\w-]+(\.[\w-]+)+$/,
							transform(value) {
								return String(value);
							},
							message: '请输入正确的手机号码格式'
						},
					],
					password: [{
							required: true,
							message: '请填写密码',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value.length > 5;
							},
							message: '密码长度必须大于等于6'
						},
					],

					repassword: [{
							required: true,
							message: '请确认密码',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return value == this.formData.password;
							},
							message: '两次输入密码不一样'
						},
					],
					code: [{
							required: true,
							message: '请输入验证码',
							trigger: ['blur'],
						},
						{
							validator: (rule, value, callback) => {
								return this.verifyCode();
							},
							message: '验证码错误'
						},
					]
				},
				btnStyle: {
					width: "90%",
					height: "100rpx",
					marginTop: '50rpx',
					background: "linear-gradient(-45deg,#01906c,#34D399)",
					color: "#FFFFFF",
					fontSize: "30rpx",
				},
			}
		},
		methods: {
			// 验证验证码
			verifyCode() {
				if (this.formData.code) {
					return this.$refs.verCode.verification(this.formData.code)
				} else {
					return false
				}
			},
			gotoLogin() {
				uni.navigateTo({
					url: '/pages/login/login'
				})
			},
			// 提交登录
			submit() {

				this.$refs.registerForm.validate().then(res => {

					uni.showLoading({
						title: '注册中...'
					})
					this.$httpApi.register(this.formData).then(({data}) => {
						uni.hideLoading()
						if (data.code == "000000") {
							this.$refs.uToast.show({
								type: 'success',
								icon: false,
								message: "注册成功",
								complete() {
									uni.navigateTo({
										url: '/pages/login/login'
									})
								}
							})
						} else {
							this.$refs.uToast.show({
								type: 'error',
								icon: false,
								message: data.mesg
							})
						}
					})
				}).catch(errors => {})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.login {
		padding-top: 150rpx;
	}

	.card_div {
		background-color: #FFFFFF;
		padding: 20px;
		border-radius: 10rpx;
	}

	.user_agreement {
		text-align: center;
		position: fixed;
		bottom: 0;
		right: 0;
		left: 0;
		margin-bottom: 20px;
		font-size: 13px;
		color: #a7b6d0;
	}

	.agreement {
		color: #01906c;
		text-decoration-line: underline;
		text-underline-offset: 2px;
	}

	.login_label {
		padding: 60upx 0;
		text-align: center;
		font-size: 30upx;
		color: #a7b6d0;
	}
</style>
